<script setup>
import {Calendar, Message, Phone, Plus, School, UserFilled} from "@element-plus/icons-vue";
import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import axios from "axios";
const store = useStore();
let isSelect = ref(true);
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const router = useRouter();
const activeUser = computed(() => store.state.activeUser);

let  a = ref()
const enterPassword = computed(() => {
  router.push("/home/mine/password");
  isSelect.value = !isSelect.value;
})
const enterInfo = computed(() => {
  router.push("/home/mine/");
  isSelect.value = !isSelect.value;
})
let realname = ref("")
let phone = ref("")
let gender = ref("")
let address = ref("")
let age = ref("")
let url = ref("")
onMounted(() => {
  realname.value = localStorage.getItem('realname')
  phone.value = localStorage.getItem('phone')
  gender.value = localStorage.getItem('gender')
  address.value = localStorage.getItem('address')
  age.value = localStorage.getItem('age')
  url.value = localStorage.getItem('avatar')
})

//图片格式限制
const beforeAvatarUpload = (rawFile) => {
  const validTypes = ['image/jpeg', 'image/gif', 'image/png'];
  if (!validTypes.includes(rawFile.type)) {
    ElMessage.error('图片格式必须是: JPG, GIF 或 PNG !');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小应该小于: 2MB!');
    return false;
  }
  return true;
};

//上传图片
const ConsultantUpload = async (options) => {
  const formData = new FormData();
  formData.append('file', options.file);
  try {
    const response = await axios.post('/file', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    console.log(response.data);
    // 更新表单数据
    form.value.avatar = response.data;
  }
  catch (error) {
    console.error('上传失败:', error);
    ElMessage({
      type: 'error',
      message: '上传过程中发生了错误'
    });
  }
}

const form = ref({
  avatar: ''
});

const changeImg = () =>{
  dialogFormVisible.value = true;
}

const change = () =>{
  axios.put("/consultant/updateConsultantAvatar",{
    consultantId:localStorage.getItem("consultantId"),
    avatar:form.value.avatar
  },{
    headers: {
      "Content-Type":"multipart/form-data"
    }
  })
      .then(res=>{
        if (res.data.code==200){
          localStorage.setItem('avatar',form.value.avatar)
          alert("修改成功")
        }else {
          alert("修改失败")
        }
      })
      .catch(err=>{
        alert("修改失败")
      })

  dialogFormVisible.value = false
}

const cancel = () => {
  dialogFormVisible.value = false;
}
</script>

<template>
<div class="mine">
  <div class="left">
    <div class="title">
      <h5>个人资料</h5>
    </div>
    <div class="body">
      <div class="img">
        <div>
          <img :src="url" alt="">
        </div>
        <div @click="changeImg">修改头像</div>

        <el-dialog v-model="dialogFormVisible" title="修改头像" width="500" height="500">
          <el-form-item label="咨询师头像" :label-width="100">
            <el-upload
                id="el-upload"
                class="avatar-uploader"
                action="http://localhost:8085/file"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="ConsultantUpload"
                ref="uploadRef"
            >
              <img v-if="form.avatar"
                   :src="form.avatar"
                   class="avatar"
                   alt="图片错误"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <div style="width: 100%">
            <el-button type="danger" @click="change" style="text-align: right">确定</el-button>
            <el-button type="primary" @click="cancel" style="text-align: right">取消</el-button>
          </div>
        </el-dialog>

      </div>
      <div class="bottom">
        <ul>
          <li class="box">
            <el-icon><UserFilled /></el-icon>
            <span>用户姓名：</span>
            <p>{{realname}}</p>
          </li>
          <li class="box">
            <el-icon><Phone /></el-icon>
            <span>手机号码：</span>
            <p>{{phone}}</p>
          </li>
          <li class="box">
            <el-icon><School /></el-icon>
            <span>性别：</span>
            <p>{{gender}}</p>
          </li>
          <li class="box">
            <el-icon><Message /></el-icon>
            <span>地址</span>
            <p>{{address}}</p>
          </li>
          <li class="box" style="border-bottom: 1px #6c6c6c solid">
            <el-icon><Calendar /></el-icon>
            <span>年龄</span>
            <p>{{age}}岁</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="title">
      <h5>基本资料</h5>
    </div>
    <div class="body1">
      <div class="body-title">
        <div @click="enterInfo" id="info" :class="{info:isSelect, active:!isSelect}">基本信息</div>
        <div @click="enterPassword" id="pass" :class="{info:!isSelect, active:isSelect}">修改密码</div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</div>
</template>

<style scoped>
.mine{
  display: flex;
  padding: 5px;
}
.left{
  width: 400px;
  height: 500px;
  background-color: #79b9d5;
}
.right{
  margin-left: 5px;
  width: 600px;
  height: 450px;
  background-color: #71bd71;
}
.title{
  display: inline-block;
  font-size: 20px;
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
  padding: 0;
  text-overflow: ellipsis;
  height: 40px;
}
.body{
  height: 400px;
  margin-left: 10px;
}
.body1{
  height: 400px;
  margin-left: 10px;
}
.img{
  width: 100%;
  height: 170px;
  display: flex;
  flex-direction: column;
}
.img img{
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.img>div{
  margin: 0 auto;
}
.img p{
  margin: 0 auto;
}
.box{
  border-top: 1px #6c6c6c solid;
  padding: 5px 30px;
  margin-top: 10px;

}
.box p{
  display: inline-block;
  float: right;
}
.bottom{
  width: 100%;
  height: 270px;
}
.bottom{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.body-title{
  display: flex;
  width: 200px;
  justify-content: space-between;
  margin-left: 10px;
  cursor: pointer;
  border-top: 2px #79b9d5 solid;
}
.info{
  background-color: #79b9d5;
  padding: 10px;
}
.active{
  background-color: #71bd71;
  padding: 10px;
}
#el-upload{
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader  {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader #el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>